<template>
  <view class="recruit-favorite-btn" @click="$emit('toggle')">
    <text>{{ isFavorite ? '★' : '☆' }}</text>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  isFavorite: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['toggle']);
</script>

<style lang="scss" scoped>
.recruit-favorite-btn {
  position: fixed;
  z-index: 100;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
  font-size: 24px;
  bottom: 100px;
  right: 20px;
  color: #faad14;
  
  &:active {
    transform: scale(0.95);
  }
}
</style>
